<template>
  <el-container class="vehicleAccess">
    <el-header class="top">
      <div class="top-left">
        <!-- <el-radio-group v-model="tabPosition" style="margin-bottom: -80px" @change="switchover" size="small">
          <el-radio-button label="" style="margin-right: -10px; width: 100px">全部车辆</el-radio-button>
          <el-radio-button label="1" style="margin-right: -12px; width: 100px"
            >待进场 <span style="background-color: #FF4C4E; color:white; display:inline-block;  width:20px; height:20px; position: absolute; top:-10px;border-radius:50%;line-height:20px;">{{ waitcarnum }}</span></el-radio-button
          >
          <el-radio-button label="2" style="margin-right: 8px; width: 120px"
            >已进场 待确认 <span style="background-color: #FF4C4E; color:white; display:inline-block;  width:20px; height:20px; position: absolute; top:-10px;border-radius:50%;line-height:20px;">{{ alreadycarnum }}</span></el-radio-button
          >
          
          <el-radio-button label="3" style="margin-right: -10px; width: 100px">在场车辆{{carnum}}</el-radio-button>
          <el-radio-button label="4" style="width: 100px">出场车辆{{chuchangcarnum}}</el-radio-button>
        </el-radio-group> -->
        <el-radio-group v-model="tabPosition" style="margin-bottom: -80px" @change="switchover" size="small">
          <el-radio-button label="" style="margin-right: -10px; width: 100px">全部车辆</el-radio-button>
          <el-radio-button label="5" style="margin-right: -12px; width: 100px"
            >待进场
            <span style="background-color: #ff4c4e; color: white; display:
             inline-block; padding: 5px; position: absolute; top: -10px; border-radius:75%;box-sizing: border-box;height: 20px; z-index:2">{{
              waitcarnum
            }}</span></el-radio-button
          >
          <el-radio-button label="1" style="margin-right: 8px; width: 120px"
            >已进场 待确认
            <span style="background-color: #ff4c4e; color: white; display:
             inline-block; padding: 5px; position: absolute; top: -10px; border-radius:75%;box-sizing: border-box;height: 20px; z-index:2">{{
              alreadycarnum
            }}</span></el-radio-button
          >
          <el-radio-button label="0" style="margin-right: -10px; width: 100px"
            >在场车辆
            <span style="background-color: #ff4c4e; color: white; display:
             inline-block; padding: 5px; position: absolute; top: -10px; border-radius:75%;box-sizing: border-box;height: 20px; z-index:2">{{
              carnum
            }}</span></el-radio-button
          >
          <el-radio-button label="4" style="width: 100px"
            >出场车辆
            <span style="background-color: #ff4c4e; color: white; display:
             inline-block; padding: 5px; position: absolute; top: -10px; border-radius:75%;box-sizing: border-box;height: 20px; z-index:2">{{
              chuchangcarnum
            }}</span></el-radio-button
          >
        </el-radio-group>
      </div>
      <div class="top-right" style="margin-top: 30px">
        <el-button
          size="medium"
          style="background-color: #e9e9e9; color: #9b9b9b; border: 0; padding-left: 7px; width: 100px"
          type="info"
          class="el-icon-plus"
          @click="$router.push('parkService/vehicleAccess/add')"
          >新增车辆</el-button
        >
        <el-button size="medium" style="background-color: #e9e9e9; color: #9b9b9b; border: 0; padding-left: 8px; width: 115px" type="info" class="el-icon-download" @click="xiazai"
          >下载出场单</el-button
        >
      </div>
    </el-header>
    <div class="form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="车架号:" label-width="100px" style="margin-right: 100px" size="small">
          <el-input v-model="formInline.carFrameNo" style="width: 213px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="车牌号:" label-width="100px" style="margin-right: 100px">
          <el-input v-model="formInline.carNumber" style="width: 213px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型:" label-width="100px" size="small">
          <el-input v-model="formInline.carType" style="width: 220px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="入场时段:" label-width="100px" style="margin-top: -10px">
          <el-date-picker v-model="startInTime" type="daterange" start-placeholder="开始日期" @change='startInTimeChange' end-placeholder="结束日期"  value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']"> </el-date-picker>
        </el-form-item>
        <el-form-item label="出场时段:" label-width="100px" style="margin-top: -10px">
          <el-date-picker v-model="startOutTime" type="daterange" start-placeholder="开始日期" @change='startOutTimeChange' end-placeholder="结束日期" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']"> </el-date-picker>
        </el-form-item>
        <el-form-item label="是否收费:" label-width="100px" size="small" style="margin-top: -10px">
          <el-checkbox-group v-model="isFreeRequire" :max="1">
            <el-checkbox :label="1">是</el-checkbox>
            <el-checkbox :label="0">否</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item size="mini" style="margin-left: 20px; margin-top: -10px; margin-bottom: 0">
          <el-button type="primary" @click="onSubmit" plain>查询</el-button>
          <el-button type="primary" @click="daochu" plain>导出</el-button>
          <el-button type="primary" @click="rmImport()" plain>导入</el-button>
          <el-button type="primary" @click="repaly" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin-top: 15px; margin-bottom: -10px; color: #ffa745">
      <span class="iconfont el-icon-tingchechang" style="font-size: 22px; margin-right: 5px; vertical-align: top;font-weight:700"></span
      ><span style="display: inline-block; margin-bottom: 5px;font-weight:700">在场车辆 ：{{ carnum }}</span>
    </div>
    <div class="car-table">
      <div class="car-table-all" v-if="this.tabPosition != 4">
        <div style="position: relative" >
          <el-checkbox v-model="allChecked" @change="toggleSelection" >全选</el-checkbox>
          <span class="checkCar">
            已选车辆
            <span class="checkCar-org">{{ CheckedNum }}</span>
            辆
          </span>

          <!-- <img src="../../../assets/carout1.png" alt="" style="position: absolute; left: 196px; top: 8px; width: 20px; height: 20px" />
          <img src="../../../assets/carout2.png" alt="" style="position: absolute; left: 306px; top: 8px; width: 20px; height: 20px" /> -->
          <el-button class="car-table-btn" @click="ConfirmApproach" size="mini"
            ><span class="iconfont el-icon-cheliangruchang" style="margin-right: 4px; vertical-align: middle"></span>确认进场</el-button
          >
          <el-button class="car-table-btn" @click="outAllCar" size="mini"><span class="iconfont el-icon-cheliangchuchang" style="margin-right: 4px; vertical-align: middle"></span>授权出场</el-button>
        </div>
        <div style="margin-bottom: 12px">
          <span class="iconfont el-icon-wenhao" style="color: rgb(64, 158, 255); margin-right: 1px; font-size: 20px; vertical-align: middle"></span>
          <el-popover placement="bottom" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            <div class="shouming">
              <p>1、不同车辆收费的基础费用不同，小卡10元，轻卡15元，其他20元 以重卡车辆为例：</p>
              <p>2、车辆停车时间小于等于2小时，不收费</p>
              <p>3、车辆停车时间大于2小时，小于等于24小时，收费20元</p>
              <p>4、车辆停车时间大于24小时，小于等于48小时，收费40元，以此类推</p>
            </div>
            <el-button type="text" slot="reference" style="color: #333333; font-size: 15px">停车费计费说明</el-button>
          </el-popover>
        </div>
      </div>
      <div class="car-table-list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          :show-header="false"
          @toggleAllSelection="toggleAllSelection"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" v-if="this.tabPosition != 4"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <div class="car-list">
                <div class="car-list-img" style="position: relative">
                  <img v-if="scope.row.isFeeRequire == 1" style="position: absolute; left: 0; top: 0" src="@/assets/chargecar.png" alt="" />
                  <img v-else-if="scope.row.isFeeRequire == 0" style="position: absolute; left: 0; top: 0" src="@/assets/freecar.png" alt="" />
                  <img v-else style="position: absolute; left: 0; top: 0" alt="" />
                  <img style="width: 165px" src="@/assets/car.png" alt />
                </div>
                <div class="car-list-text">
                  <!-- <img v-if="scope.row.carStatus == '3'" style="position: absolute; right: 70px; top: 62px; z-index: 99; width: 20px; height: 20px" src="../../../assets/carout4.png" alt="" />
                  <img v-if="scope.row.carStatus == '1'" style="position: absolute; right: 70px; top: 62px; z-index: 99; width: 20px; height: 20px" src="../../../assets/carout3.png" alt="" /> -->
                  <p class="car-list-text-buju">
                    <span class="carNumber">车架号：{{ scope.row.carFrameNo }}</span>
                    <span>车辆品牌：{{ scope.row.carBrand }}</span>
                    <span>车辆类型:{{ scope.row.carType }}</span>
                    <span>
                      <strong style="font-size: 15px">停车费</strong>：
                      <span class="parkingFee">{{ scope.row.parkingFee }}元</span>
                    </span>
                    <span>
                      车辆状态:
                      <span class="carStatus" v-if="scope.row.carStatus == '5'">待进场</span>
                      <span class="carStatus" v-if="scope.row.carStatus == '4'">已出场</span>
                      <span class="carStatus" v-if="scope.row.carStatus == '3'">待出场</span>
                      <span class="carStatus" v-if="scope.row.carStatus == '2'">已经确认进场</span>
                      <span class="carStatus" v-if="scope.row.carStatus == '1'">已进场待确认</span>
                    </span>
                  </p>
                  <p class="car-time">
                    <span>入场时间：{{ scope.row.createDate }}</span>
                    <el-button size="mini" class="car-button" v-if="scope.row.carStatus == '3'" @click="outCar(scope.row)" plain style="width: 95px">
                      <span class="iconfont el-icon-cheliangchuchang1" style="vertical-align: middle; margin-left: -5px"></span>
                      授权出场</el-button
                    >
                    <el-button size="minni" class="car-button" v-if="scope.row.carStatus == '5'" @click="ConfirmApproachOnes(scope.row)" plain style="width: 95px">
                      <span class="iconfont el-icon-cheliangruchang1" style="vertical-align: middle; margin-left: -5px"></span>
                      确认进场</el-button
                    >
                  </p>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: right"
      >
      </el-pagination>
    </div>
    <!--导入-->
    <el-dialog title="导入文件" :visible.sync="uploadlg.show" :close-on-click-modal="false" :close-on-press-escape="false" width="400px">
      <!-- 下载模板：<el-button type="text" size="mini" style="color: #409eff" @click="onDowmload">合同导入模板.xlsx</el-button> -->
      <br />
      <br />
      <el-upload ref="upload" class="upload-box" drag action="" :http-request="HttpRequest" :auto-upload="false" multiple :limit="1" name="files">
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击选择导入文件</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" icon="el-icon-upload2" @click="submitFile">导入</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import { ExportFile, ConfirmApproach, ConfirmApproachOne, outCar, outAllCar, getincarNum, importCar } from '@/views/BasicServicesPark/api/vehicleAccess/add.js'
import { getItem } from '@/utils/store.js'
export default {
  data() {
    return {
      startInTime: [],
      startOutTime:[],
      uploadlg: {
        show: false,
        noUploadFile: true,
      },
      waitcarnum: 0,
      chuchangcarnum: 0,
      alreadycarnum: 0,
      tabPosition: '',
      carnum: 0,
      companyId: '',
      isFreeRequire: [],
      formInline: {},
      total: 0,
      text: '',
      pShow: false,
      allChecked: false,
      multipleSelection: [],
      tableData: [
      ],
    }
  },
  computed: {
    // a computed getter
    CheckedNum: function () {
      // `this` points to the vm instance
      return this.multipleSelection.length
    },
  },
  created() {
    this.getCarLists()
    this.getincarNum()
    this.zaichang()
    this.yijinchang()
    this.chuchang()
  },

  methods: {
    startInTimeChange(){
      console.log(this.startInTime);
      this.formInline.startInTime = this.startInTime[0]
      this.formInline.endInTime = this.startInTime[1]
    },
    startOutTimeChange(){
       this.formInline.startOutTime = this.startInTime[0]
      this.formInline.endOutTime = this.startInTime[1]
    },
    repaly(){ //重置
      this.formInline={}
      this.startInTime=[]
      this.startOutTime=[]
      this.tabPosition=''
      this.getCarLists()
    },
    // 导入
    rmImport: function () {
      this.uploadlg.show = true
    },

    async HttpRequest(file) {
      // console.log(file)
      // await HttpRequest(file).then((res) => {
      //   console.log(res)
      // })
      let param = new FormData()
      param.append('file', file.file)
      let companyId = getItem('USER_INFO').data.data.companyId
      param.append('companyId', companyId)

      const { data: res } = await importCar(param)
      console.log('code')
      console.log(res.code)
      if (res.code == 0) {
        this.$message({
          type: 'success',
          offset: 200,
          message: '导入成功!',
        })
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: '导入失败，请重试！',
        })
      }
    },

    submitFile() {
      console.log(this.$refs.upload.fileList)
      this.$refs.upload.submit()
    },
    async getincarNum() {
      let that = this
      let companyId = getItem('USER_INFO').data.data.companyId
      let params = {
        companyId: companyId,
        carStatus: 1,
      }
      const { data: res } = await getincarNum(params)
      that.waitcarnum = res.data
    },
    async zaichang() {
      let that = this
      let companyId = getItem('USER_INFO').data.data.companyId
      let params = {
        companyId: companyId,
        carStatus: 0,
      }
      const { data: res } = await getincarNum(params)
      that.carnum = res.data
    },
    async yijinchang() {
      let that = this
      let companyId = getItem('USER_INFO').data.data.companyId
      let params = {
        companyId: companyId,
        carStatus: 2,
      }
      const { data: res } = await getincarNum(params)
      that.alreadycarnum = res.data
    },
    async chuchang() {
      let that = this
      let companyId = getItem('USER_INFO').data.data.companyId
      let params = {
        companyId: companyId,
        carStatus: 3,
      }
      const { data: res } = await getincarNum(params)
      that.chuchangcarnum = res.data
    },
    daochu() {
      ExportFile('/webcar/car/export', this.formInline)
    },
    // xiazai() {
    //   //下载出场单
    //   ExportFile('/webcar/car/exportOut', this.formInline)
    // },
     xiazai() {
      //下载出场单
      let that = this
      let companyName = getItem('USER_INFO').data.data.companyName
      that.formInline.name = companyName
      ExportFile('/webcar/car/exportOut', {name: companyName})
    },


    async getCarLists() {
      this.getincarNum()
      let that = this
      let companyId = getItem('USER_INFO').data.data.companyId
      that.formInline.companyId = companyId
      const { data: res } = await that.$http.get('/webcar/car/page', {
        params: that.formInline,
      })
      console.log(res)
      if (res.data == null) {
        return (that.tableData = [])
      }
      that.tableData = res.data.records
      that.total = res.data.total
    },
    //1.已进场待确认 2.已确认进场 3.待出场 4.已出场 5.待进场
    switchover() {
      if (this.tabPosition == '') {
        this.formInline.carStatus = ''
      }
      if (this.tabPosition == '5') {
        this.formInline.carStatus = '5'
      }
      if (this.tabPosition == '1') {
        this.formInline.carStatus = '1'
      }
      if (this.tabPosition == '0') {
        this.formInline.carStatus = '0'
      }
      if (this.tabPosition == '4') {
        this.formInline.carStatus = '4'
      }
      this.getCarLists()
    },
    async ConfirmApproach() {
      //确认批量进场
      let ids = []
      this.multipleSelection.forEach((e) => {
        ids.push(e.id)
      })
      let data = {
        ids: ids,
        type: 'customer',
      }
      const { data: res } = await ConfirmApproach(data)
      if (res.code == 0) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        this.getCarLists()
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: res.msg,
        })
      }
    },
    async ConfirmApproachOnes(row) {
      //确认单个车辆入场
      let id = row.id
      let data = {
        type: 'customer',
      }
      const { data: res } = await ConfirmApproachOne(id, data)
      if (res.code == 0) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        this.getCarLists()
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: res.msg,
        })
      }
    },
    async outAllCar() {
      let ids = []
      this.multipleSelection.forEach((e) => {
        ids.push(e.id)
      })
      let data = {
        ids: ids,
        type: 'customer',
      }
      const { data: res } = await outAllCar(data)
      if (res.code == 0) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })
        this.getCarLists()
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: res.msg,
        })
      }
    },
    async outCar(row) {
      //单个车辆出厂
      let id = row.id
      let data = {
        type: 'customer',
      }
      const { data: res } = await outCar(id, data)
      if (res.code == 0) {
        this.$message({
          message: '操作成功',
          type: 'success',
        })

        console.log('单个出场')
        this.getCarLists()
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: res.msg,
        })
      }
    },
    onSubmit() {
      this.formInline.isFreeRequire = this.isFreeRequire.toString()
      console.log(this.formInline)
      this.getCarLists()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length == this.tableData.length) {
        this.allChecked = true
      }
      // console.log('选中项' + this.multipleSelection)
    },
    toggleSelection() {
      if (this.allChecked) {
        this.tableData.forEach((row) => {
          this.$refs.multipleTable.toggleAllSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    toggleAllSelection(val) {
      this.multipleSelection = val
    },
    show() {
      return this.show()
    },
    sizeChange(val) {
      // console.log(`每页有${val}条数据`)
      this.formInline.size = val
      this.getCarLists()
    },
    currentChange(val) {
      // console.log(`当前页: ${val}`)
      this.formInline.current = val
      this.getCarLists()
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../BasicServicesPark/vehicleAccess/iconfont/iconfont.css';
.vehicleAccess {
  width: 1200px;
  margin: 0 auto;

  .top {
    margin-top: 0px;
    margin-bottom: -10px;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    .top-left {
      /deep/.el-radio-button__inner {
        border-left: 1px solid #dcdfe6 !important;
        border-radius: 2px;
        box-shadow: unset;
      }
    }
  }
  .form {
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    width: 100%;
    padding: 20px;
    margin-top: 40px;
  }
  .car-table {
    margin-top: 15px;
    .car-table-list {
      .car-list {
        display: flex;
        justify-content: space-between;
        .car-list-img {
          width: 20%;
          height: 115px;
          margin-top: 15px;
          margin-bottom: 0px;
        }
        .car-list-text {
          width: 80%;
          .car-list-text-buju {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            margin-top: 15px;
            .carNumber {
              font-size: 16px;
            }
          }
          .car-time {
            display: flex;
            justify-content: space-between;
            .car-button {
              position: absolute;
              right: 0;
            }
          }
          .parkingFee {
            color: rgb(255, 87, 87);
          }
          .carStatus {
            color: rgb(24, 144, 255);
          }
        }
      }
    }
    .car-table-all {
      display: flex;
      justify-content: space-between;
      .checkCar {
        margin: 0 20px;
        font-size: 14px;
        color: rgb(119, 119, 119);
        .checkCar-org {
          color: rgb(255, 157, 46);
        }
      }
      .car-table-btn {
        background-color: rgb(233, 233, 233);
      }
      .text {
        font-size: 14px;
        padding-top: 10px;
        .el-icon-reading {
          padding: 5px;
          color: rgb(146, 199, 255);
        }
      }
    }
  }
  .pagination {
    width: 100%;
    text-align: right;
    margin-bottom: 40px;
    margin-top: 40px;
  }
}
.vehicleAccess .car-table .car-table-all[data-v-f007c7e0] {
  display: flex;
  justify-content: space-between;
  border: 1px solid #dcdfe6;
  padding-top: 17px;
  margin-top: 10px;
  border-left: 0;
  border-right: 0;
}

.el-button--medium {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  padding-left: 32px;
  padding-right: 9px;
}

.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 213px;
  margin-right: 90px;
  height: 32px;
}
.el-range-editor.el-input__inner {
  display: inline-flex;
  align-items: center;
  padding: 0px 5px;
}
.el-date-editor .el-range-input {
  appearance: none;
  border: none;
  outline: none;
  display: inline-block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 30%;
  text-align: center;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
}
.el-range-editor .el-range-input {
  line-height: 1;
}
</style>
